<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .demo {
        font-family: sans-serif;
        border: 1px solid #eee;
        border-radius: 2px;
        padding: 20px 30px;
        margin-top: 1em;
        margin-bottom: 40px;
        user-select: none;
        overflow-x: auto;
      }

      .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
      }
      .tab-button:hover {
        background: #e0e0e0;
      }
      .tab-button.active {
        background: #e0e0e0;
      }
      .tab {
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <!-- 
      DOM 内模板解析的注意事项
        1. 大小写限制
          注册组件是使用驼峰命名的话，那么使用时需要换成短横线写法
        
        2. 闭合标签
          组件元素不能自闭和，可能会对后续的标签产生影响

        3. 元素位置限制

      上面的这些限制在下面三种情况下不会有：
        1. 使用 template 字符串来写模板时
        2. 使用 template 结合 <script type="text/x-template"> 来写模板时
        3. 使用 单文件组件(.vue后缀的文件时)
     -->

    <div id="app">
      <div class="demo">
        <home-hello blog-title="首页"></home-hello>
      </div>
    </div>

    <script src="../lib/vue2.js"></script>

    <script type="text/x-template" id="tmp">
      <div class="demo">
        <HomeHello blogTitle="首页" />

        <hr />

        <table>
          <MyTr />
        </table>
      </div>
    </script>

    <script>
      Vue.component("HomeHello", {
        props: ["blogTitle"],

        template: `
          <div class="tab">
            {{ blogTitle }}
          </div>
        `,
      });

      Vue.component("MyTr", {
        template: `
          <tr>
            <td>1</td>  
            <td>2</td>  
          </tr>
        `,
      });

      new Vue({
        // template: "#tmp",

        data() {
          return {
            currentTab: "Home",
            tabs: ["Home", "About", "Posts"],
          };
        },
      }).$mount("#app");

      // app.mount("#app");
    </script>
  </body>
</html>
